<script lang="ts" setup>
  import 'echarts-wordcloud'
  import * as echarts from 'echarts'

  const containerRef = ref<any>()

  const initChart = () => {
    setTimeout(() => {
      const chartsLiquid = echarts.init(containerRef.value)
      // 把配置和数据放这里
      chartsLiquid.setOption({
        series: [
          {
            type: 'wordCloud',
            data: [
              {
                value: 600, // 词典大小配置
                name: '十八碗', // 词典名称配置
                textStyle: {
                  // 单独配置某个词典样式
                  shadowBlur: 4,
                  shadowOffsetY: 14,
                  color: '#BDBEFA',
                },
                emphasis: {
                  textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: 'red',
                  },
                },
              },
              {
                name: '肯德基',
                value: 800,
              },
              {
                name: '太二酸菜鱼',
                value: 400,
              },
              {
                name: '麦当劳',
                value: 500,
              },
              {
                name: '匠子烤鱼',
                value: 500,
              },
            ],
            textStyle: {
              // 单独配置某个词典样式
              shadowBlur: 4,
              shadowOffsetY: 14,
              fontFamily: 'sans-serif',
              fontWight: 'bold',
              color() {
                return `rgb(
                  ${Math.round(Math.random() * 160)},
                  ${Math.round(Math.random() * 160)},
                  ${Math.round(Math.random() * 160)}
                )`
              },
            },
            emphasis: {
              textStyle: {
                textShadowBlur: 10,
                textShadowColor: '#333',
              },
            },
          },
        ],
      })
    }, 50)
  }

  onMounted(() => {
    initChart()
  })
</script>

<template>
  <div
    class="word-cloud-container"
    id="word-cloud-container"
    ref="containerRef"
  >
  </div>
</template>

<style lang="less" scoped>
  .word-cloud-container {
    width: 200px;
    height: 200px;
  }
</style>
